<template>
  <!--  -->
  <div id="app" class="overflowHidden">
    <el-row v-if="!$route.meta.showNav" style="height: 100%">
      <el-col :span="24" style="">
        <div class="header">
          <div class="flex_1">
            <div class="display_flex align_items_center margin_left_20">
              <img src="./assets/images/logo.png" class="logo" alt="" />
              <div class="headerTitle margin_left_20">乐易呗商户平台</div>
            </div>
          </div>
          <div class="margin_right_20 cursor_pointer">
            <el-dropdown class="tuichu display_flex align_items_center" @command="handleClick">
              <img src="./assets/images/logo.png" class="headTx" alt="" />
              <span class="el-dropdown-link">
                张等
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item> 退出账号 </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </el-col>
      <el-col :span="3" style="height: 100%; background: #ffffff">
        <el-menu background-color="#FFFFFF" text-color="#5E5C5C" active-text-color="#FFFFFF" :unique-opened="true"
          default-active="1" :collapse-transition="false" mode="vertical" style="width: 100%">
          <div v-for="(item, index) in dataList" :key="item.title" v-if="item.checked == 1">
            <div v-if="item.child">
              <el-submenu :index="index + ''" @click.native="onclickFun_F(item)">
                <template slot="title">
                  <i :class="item.icon"></i>
                  <span style="font: size 14px">{{ item.title }}</span>
                </template>
                <el-menu-item-group v-for="(items, indexs) in item.child" v-if="item.checked == 1 && items.checked == 1"
                  :key="items.title" @click.native="onclickFun(items)">
                  <el-menu-item :index="index + '-' + indexs">
                    <i :class="item.icon"></i>
                    <span style="font-size: 12px">{{ items.title }}</span>
                  </el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </div>
            <div v-else>
              <el-menu-item :index="index + ''" @click.native="onclickFun(item)">
                <i :class="item.icon"></i>
                <span slot="title" style="font: size 12px">{{
                  item.name
                }}</span>
              </el-menu-item>
            </div>
          </div>
        </el-menu>
      </el-col>
      <el-col :span="21" style="height: 100%">
        <div class="width_99 margin_top_5 eltabs">
          <el-tabs v-model="editableTabsValue" type="card" closable @tab-click="tabclick" @tab-remove="removeTab">
            <el-tab-pane v-for="(item, index) in routerList" :key="item.meta.title" :label="item.meta.title"
              :name="item.meta.title">
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="right_box">
          <router-view />
        </div>
      </el-col>
    </el-row>
    <router-view v-if="$route.meta.showNav" />
  </div>
</template>

<script>
import { post } from "./util/request";
export default {
  name: "App",
  data() {
    return {
      msg: "",
      routerList: [],
      routerIndex: null,
      editableTabsValue: '',
      dataList: [
        {
          id: 419,
          parent_id: 0,
          title: "\u9996\u9875",
          icon: "",
          path: "index",
          is_menu: 1,
          sort: 1,
          status: 1,
          is_wx_menu: 0,
          checked: 1,
          child: []
        },
        {
          id: 376,
          parent_id: 0,
          title: "组织管理",
          icon: "",
          path: "",
          is_menu: 1,
          sort: 3,
          status: 1,
          is_wx_menu: 0,
          checked: 1,
          child: [
            {
              id: 377,
              parent_id: 376,
              title: "组织管理",
              icon: "bjgl",
              path: "organizationList",
              is_menu: 1,
              sort: 1,
              status: 1,
              is_wx_menu: 1,
              checked: 1,
              child: []
            }
          ]
        },
        {
          id: 376,
          parent_id: 0,
          title: "代理商管理",
          icon: "",
          path: "",
          is_menu: 1,
          sort: 3,
          status: 1,
          is_wx_menu: 0,
          checked: 1,
          child: [
            {
              id: 377,
              parent_id: 376,
              title: "代理商列表",
              icon: "bjgl",
              path: "agent",
              is_menu: 1,
              sort: 1,
              status: 1,
              is_wx_menu: 1,
              checked: 1,
              child: []
            },
            {
              id: 378,
              parent_id: 376,
              title: "平台成本",
              icon: "bjsh",
              path: "PlatformCost",
              is_menu: 1,
              sort: 2,
              status: 1,
              is_wx_menu: 1,
              checked: 1,
              child: []
            }
          ]
        },
        {
          id: 376,
          parent_id: 0,
          title: "权限管理",
          icon: "",
          path: "",
          is_menu: 1,
          sort: 3,
          status: 1,
          is_wx_menu: 0,
          checked: 1,
          child: [
            {
              id: 377,
              parent_id: 376,
              title: "菜单权限",
              icon: "bjgl",
              path: "menuList",
              is_menu: 1,
              sort: 1,
              status: 1,
              is_wx_menu: 1,
              checked: 1,
              child: []
            },
            {
              id: 378,
              parent_id: 376,
              title: "组织架构",
              icon: "bjsh",
              path: "organization",
              is_menu: 1,
              sort: 2,
              status: 1,
              is_wx_menu: 1,
              checked: 1,
              child: []
            },
            {
              id: 378,
              parent_id: 376,
              title: "平台员工",
              icon: "bjsh",
              path: "PlatformStaff",
              is_menu: 1,
              sort: 2,
              status: 1,
              is_wx_menu: 1,
              checked: 1,
              child: []
            }
          ]
        },
        {
          id: 376,
          parent_id: 0,
          title: "门店管理",
          icon: "",
          path: "",
          is_menu: 1,
          sort: 3,
          status: 1,
          is_wx_menu: 0,
          checked: 1,
          child: [
            {
              id: 378,
              parent_id: 376,
              title: "职务管理",
              icon: "bjsh",
              path: "jobButies",
              is_menu: 1,
              sort: 2,
              status: 1,
              is_wx_menu: 1,
              checked: 1,
              child: []
            },
            {
              id: 377,
              parent_id: 376,
              title: "门店列表",
              icon: "bjgl",
              path: "StoreList",
              is_menu: 1,
              sort: 1,
              status: 1,
              is_wx_menu: 1,
              checked: 1,
              child: []
            },
            {
              id: 377,
              parent_id: 376,
              title: "交班记录",
              icon: "bjgl",
              path: "shiftRecords",
              is_menu: 1,
              sort: 1,
              status: 1,
              is_wx_menu: 1,
              checked: 1,
              child: []
            }
          ]
        },
        {
          id: 376,
          parent_id: 0,
          title: "商户管理",
          icon: "",
          path: "",
          is_menu: 1,
          sort: 3,
          status: 1,
          is_wx_menu: 0,
          checked: 1,
          child: [
            {
              id: 378,
              parent_id: 376,
              title: "全部商户",
              icon: "bjsh",
              path: "merchant",
              is_menu: 1,
              sort: 2,
              status: 1,
              is_wx_menu: 1,
              checked: 1,
              child: []
            },
            {
              id: 377,
              parent_id: 376,
              title: "进件管理",
              icon: "bjgl",
              path: "noeinList",
              is_menu: 1,
              sort: 1,
              status: 1,
              is_wx_menu: 1,
              checked: 1,
              child: []
            },
            {
              id: 377,
              parent_id: 376,
              title: "商家套餐",
              icon: "bjgl",
              path: "Merchantmeal",
              is_menu: 1,
              sort: 1,
              status: 1,
              is_wx_menu: 1,
              checked: 1,
              child: []
            },
            {
              id: 377,
              parent_id: 376,
              title: "聚合码",
              icon: "bjgl",
              path: "qrcode",
              is_menu: 1,
              sort: 1,
              status: 1,
              is_wx_menu: 1,
              checked: 1,
              child: []
            }
          ]
        }
      ]
    }
  },
  mounted() {
    this.info()
    var that = this
    this.$bus.on("lowerRight", value => {
      if (value == "success") {
      }
    })
  },
  watch: {
    $route: function (newV, oldV) {
      this.getRoutePath(newV, 1)
    }
  },
  methods: {

    // 关闭多页面应用
    removeTab(options) {
      var that = this;
      that.routerList.forEach((data, index) => {
        if (data.meta.title == options) {
          that.routerList.splice(index, 1)
        }
      })
      if (that.routerList[that.routerList.length - 1]) {
        that.editableTabsValue = that.routerList[that.routerList.length - 1].meta.title;
        this.$router.push({
          name: that.routerList[that.routerList.length - 1].name
        })
      }
      console.log(that.routerList.length, '1231111111111');
      if (that.routerList.length == 0) {
        this.$router.push({
          name: 'index'
        })
      }
    },
    // 点击多页面应用
    tabclick(options) {
      this.editableTabsValue = this.routerList[options.index].meta.title;
      this.$router.push({
        name: this.routerList[options.index].name
      })
    },
    // 路由更新
    getRoutePath(newV, options) {
      this.routerList.forEach((item, index) => {
        if (item.name === newV.name) {
          this.routerList.splice(index, 1)
        }
      })
      if (options == 1) {
        if (newV.name != 'login') {
          this.routerList.push(newV)
        }
        if (this.routerList.length == 1 && this.routerList[0].name == 'index') {
          this.editableTabsValue = "首页";
        }
      } else if (options == 2) {
        // this.routerList.push(newV)
      }
      this.routerIndex = this.routerList.length - 1;
      if (this.routerList.length > 10) {
        this.routerList.splice(1, 1)
      }
    },
    info() { },

    onclickFun(options) {
      this.$router.push({
        name: options.path
      })
      this.editableTabsValue = options.title;

    },
    onclickFun_F(options) {
      if (options.path) {
        this.$router.push({
          name: options.path
        })
        this.editableTabsValue = options.title;
      }
    },
    handleClick() {
      window.sessionStorage.removeItem("uid");
      window.sessionStorage.removeItem("access_token");
      window.sessionStorage.removeItem("infoData");
      this.$router.push({
        name: "login"
      })
    }
  }
}
</script>

<style>
/* .logoImg {
} */
html,
body {
  width: 100%;
  height: 100%;
  background: #f1f4f9;
}

.overflowHidden {
  overflow: hidden;
}

* {
  padding: 0;
  margin: 0;
}

#app {
  width: 100%;
  height: 100%;
  /* background: #f1f4f9; */
}

/* .el-form-item__content {
  width: 100% !important;
} */
.app {
  padding-bottom: 100px;
  overflow: auto;
}

.logo {
  width: 46px;
}

.header {
  width: 100%;
  background: #ffffff;
  padding: 10px 0;
  display: flex;
  align-items: center;
  /* box-shadow: 0px 0px 5px 5px #525A66; */
  box-shadow: 2px 2px 8px 0px rgba(82, 90, 102, 0.4);
}

.left_box {
  height: 100%;
  overflow-y: auto;
}

.left_box::-webkit-scrollbar {
  display: none;
  /*隐藏滚动条*/
}

.right_box::-webkit-scrollbar {
  display: none;
  /*隐藏滚动条*/
}

.right_box {
  width: 99%;
  height: 99%;
  margin: 0 auto;
  margin-top: 6px;
  overflow: scroll;
  background-color: #f1f4f9;
  /* border-radius: 14px; */
}

.display_flex {
  display: flex !important;
}

.align_items_center {
  align-items: center;
}

.justify_content_center {
  justify-content: center;
}

.justify_content_flex_end {
  justify-content: flex-end;
}

.flex_1 {
  flex: 1;
}

.text_align_center {
  text-align: center;
}

.text_align_right {
  text-align: right;
}

.margin_top_5 {
  margin-top: 5px !important;
}

.margin_top_10 {
  margin-top: 10px !important;
}

.margin_top_20 {
  margin-top: 20px !important;
}

.margin_top_30 {
  margin-top: 30px !important;
}

.margin_top_40 {
  margin-top: 40px !important;
}

.margin_top_60 {
  margin-top: 60px !important;
}

.margin_left_10 {
  margin-left: 10px !important;
}

.margin_left_20 {
  margin-left: 20px !important;
}

.margin_left_60 {
  margin-left: 60px !important;
}

.margin_right_10 {
  margin-right: 10px !important;
}

.margin_right_20 {
  margin-right: 20px !important;
}

.margin_bottom_0 {
  margin-bottom: 0 !important;
}

.margin_right_20 {
  margin-right: 20px !important;
}

.margin_bottom_0 {
  margin-bottom: 0 !important;
}

.margin_bottom_20 {
  margin-bottom: 20px;
}

.margin_bottom_10 {
  margin-bottom: 10px !important;
}

.width_100 {
  width: 100% !important;
}

.width_99 {
  width: 99%;
  margin: 0 auto;
}

.width_98 {
  width: 98%;
  margin: 0 auto;
}

.width_96 {
  width: 96%;
  margin: 0 auto;
}

.width_90 {
  width: 90%;
  margin: 0 auto;
}

.width_80 {
  width: 80%;
  margin: 0 auto;
}

.width_86 {
  width: 86%;
  margin: 0 auto;
}

.width_70 {
  width: 70%;
  margin: 0 auto;
}

.width_60 {
  width: 60%;
  margin: 0 auto;
}

.width_40 {
  width: 40%;
  margin: 0 auto;
}

.padding_top_10 {
  padding-top: 10px !important;
}

.padding_top_10_bottom_10 {
  padding: 10px 0 !important;
}

.padding_top_20 {
  padding-top: 20px !important;
}

.padding_6 {
  padding: 6px !important;
}

.padding_10 {
  padding: 10px !important;
}

.padding_15 {
  padding: 15px 0 !important;
}

.padding_bottom_10 {
  padding-bottom: 10px !important;
}

.el-menu-item.is-active {
  background-color: #3f75ff !important;
  color: #fff;
}

.headerTitle {
  color: #ffffff;
  font-size: 18px;
}

.width_90 {
  width: 90% !important;
}

/* span {
  color: #fff !important;
} */

.headerTitle {
  color: #717171;
  font-size: 18px;
}

.tuichu {
  color: #717171;
  font-size: 16px !important;
}

.headTx {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.el-submenu .el-menu-item {
  min-width: 100% !important;
}

.headTx {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.el-submenu .el-menu-item {
  min-width: 100% !important;
}

.el-menu-item:hover {
  background-color: #3f75ff !important;
  color: #ffffff !important;
}

.el-tag_btn_1 {
  background: #fff;
  color: #656464;
  box-shadow: 4px 2px 10px 0px rgba(101, 101, 101, 0.2);
}

.el-tag_btn_2 {
  background: #3f75ff;
  color: #ffffff;
  box-shadow: 4px 2px 10px 0px rgba(101, 101, 101, 0.2);
}

.border_bottom {
  border-bottom: 1px solid #e1e1e1;
}

.box_height {
  width: 100%;
  height: 140px;
}

.tips_border {
  width: 100%;
  border-bottom: 1px solid #e1e1e1;
}

.xx {
  /* 	width: 90%;
		margin:0 auto; */
  border-bottom: 1px dashed #e1e1e1;
  padding: 10px;
}

.font_size_12 {
  font-size: 12px;
}

.color_A3A3A3 {
  color: #a3a3a3 !important;
}

.cursor_pointer {
  cursor: pointer;
}

.el-dialog {
  border-radius: 18px !important;
}

.btn_group {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
  box-shadow: 5px 8px 20px 4px rgba(118, 118, 118, 0.1);
  margin-top: 20px;
}

.btn_yes {
  background: #3f75ff;
  border-radius: 6px;
  color: #ffffff;
  padding: 12px 30px;
}

.btn_no {
  border: 1px solid #dbdbdb;
  border-radius: 6px;
  color: #726f6f;
  padding: 12px 30px;
}

.el-dialog__header {
  border-bottom: 1px solid #d9d9d9;
}

.el-dialog__title {
  color: #3f75ff;
}


.eltabs {
  background: #FFFFFF;
}

.el-tabs__header {
  margin: 0;
}

.el-menu-item-group__title {
  padding: 0;
}

.el-submenu .el-menu-item {
  height: 40px;
  line-height: 40px;
  padding: 0 45px;
}
.mt_10{
  margin-top: 10px;
}
</style>
